<template>
	<view class="p-50 p-t-0 left psr">
		<text class="ts-46 tb wa left m-t-30">
			<text class="tc-green">实名认证</text>
		</text>
		<br>
		<scroll-view scroll-y="true">
			<form>
				<view class="form-item" style="margin-top: 55rpx;">
					<input placeholder-class="placeholder-color" :disabled="formDisabled" class="form-input" type="text" v-model="accountInfo.realname" :maxlength="5" placeholder="填写姓名"/>
					<view class="form-count">
						<span class="full-count">{{ accountInfo.realname.length }}/</span>5
					</view>
				</view>
				<view class="form-item" style="width: 650rpx;">
					<view class="uni-list-cell uni-list-cell-pd form-input psr" style="line-height: 99rpx;">
						<view class="uni-list-cell-db" style="color: rgba(102, 102, 102, 0.87);">选择性别</view>
						<view class="select_sex psa ts-26">
							<view class="select_sex_o" :class="accountInfo.sex === 1 ? 'active_sex' : ''" @click="changeSex(1)">男</view>
							<view class="select_sex_o" :class="accountInfo.sex === 2 ? 'active_sex' : ''" style="float: right;" @click="changeSex(2)">女</view>
						</view>
					</view>
				</view>
				<view class="form-item">
					<input placeholder-class="placeholder-color" :disabled="formDisabled" class="form-input" type="text" v-model="accountInfo.card" :maxlength="18" placeholder="填写身份证号"/>
					<view class="form-count">
						<span class="full-count">{{ accountInfo.card.length }}/</span>18
					</view>
				</view>
				<view class="form-item" style="width: 650rpx;">
					<view class="form-input" style="line-height: 99rpx;">
						<picker mode="selector" :disabled="formDisabled" :range="minOptions" @change="onMultiMinChange" style="background-color: white;">
							<view class="picker">
								{{ accountInfo.nation }}
							</view>
						</picker>
					</view>
				</view>
				<view class="form-item" style="width: 650rpx;">
					<view class="form-input" style="line-height: 99rpx;">
						<picker mode="multiSelector" :disabled="formDisabled" :value="multiIndex" :range="multiRange" @change="onMultiChange" style="background-color: white;">
							<view class="picker">
								<text v-if="showBsd">{{ accountInfo.birthday }}</text>
								<text v-else style="color: rgba(102, 102, 102, 0.87);">选择生日</text>
							</view>
						</picker>
					</view>
				</view>
				<view class="form-item">
					<input placeholder-class="placeholder-color" :disabled="formDisabled" class="form-input" type="text" v-model="accountInfo.address" :maxlength="20" placeholder="填写地址"/>
					<view class="form-count">
						<span class="full-count">{{ accountInfo.address.length }}/</span>20
					</view>
				</view>
				<view class="form-item psr">
					<text class="form-item-title psa">个人身份证正面</text>
					<view class="form-item-pic">
						<view class="tc br-10 pic psr" v-for="(item,index) in picList.tempImgList1" :key="index+'1'">
							<image :src="item" @tap="$xyfun.pi(index,picList.tempImgList1)" class="form-item-open" />
							<text class="xyicon icon-del psa form-item-del" @tap="delImage(index, picList.tempImgList1)"></text>
						</view>
						<view class="tc bl br-10 ovh pic form-item-pic1" @tap="chooseImage(1)" v-if="picList.tempImgList1.length < 1">
							<image src="/static/img/user/sf1.png" class="form-item-sf"/>
						</view>
					</view>
				</view>
				<view class="form-item psr">
					<text class="form-item-title psa">个人身份证反面</text>
					<view class="form-item-pic">
						<view class="tc br-10 pic psr" v-for="(item,index) in picList.tempImgList2" :key="index+'2'">
							<image :src="item" @tap="$xyfun.pi(index,picList.tempImgList2)" class="form-item-open"/>
							<text class="xyicon icon-del psa form-item-del" @tap="delImage(index, picList.tempImgList2)"></text>
						</view>
						<view class="tc bl br-10 ovh pic form-item-pic1" @tap="chooseImage(2)" v-if="picList.tempImgList2.length < 1">
							<image src="/static/img/user/sf2.png" class="form-item-sf"/>
						</view>
					</view>
				</view>
				<view class="form-item psr">
					<text class="form-item-title psa">拍照手持身份证</text>
					<view class="form-item-pic">
						<view class="tc br-10 pic psr" v-for="(item,index) in picList.tempImgList3" :key="index+'3'">
							<image :src="item" @tap="$xyfun.pi(index,picList.tempImgList3)" class="form-item-open"/>
							<text class="xyicon icon-del psa form-item-del" @tap="delImage(index, picList.tempImgList3)"></text>
						</view>
						<view class="tc bl br-10 ovh pic form-item-pic1" @tap="chooseImage(3)" v-if="picList.tempImgList3.length < 1">
							<image src="/static/img/user/xj.png" class="form-item-img"/>
						</view>
					</view>
				</view>
				<view class="form-item psr">
					<text class="form-item-title psa">行驶证照片</text>
					<view class="form-item-pic">
						<view class="tc br-10 pic psr" v-for="(item,index) in picList.tempImgList4" :key="index+'4'">
							<image :src="item" @tap="$xyfun.pi(index,picList.tempImgList4)" class="form-item-open"/>
							<text class="xyicon icon-del psa form-item-del" @tap="delImage(index, picList.tempImgList4)"></text>
						</view>
						<view class="tc bl br-10 ovh pic form-item-pic1" @tap="chooseImage(4)" v-if="picList.tempImgList4.length < 1">
							<image src="/static/img/user/xj.png" class="form-item-img"/>
						</view>
					</view>
				</view>
				<view class="form-item psr">
					<text class="form-item-title psa">驾驶证照片</text>
					<view class="form-item-pic">
						<view class="tc br-10 pic psr" v-for="(item,index) in picList.tempImgList5" :key="index+'5'">
							<image :src="item" @tap="$xyfun.pi(index,picList.tempImgList5)" class="form-item-open"/>
							<text class="xyicon icon-del psa form-item-del" @tap="delImage(index, picList.tempImgList5)"></text>
						</view>
						<view class="tc bl br-10 ovh pic form-item-pic1" @tap="chooseImage(5)" v-if="picList.tempImgList5.length < 1">
							<image src="/static/img/user/xj.png" class="form-item-img"/>
						</view>
					</view>
				</view>
				<view class="form-item psr" style="margin-top: 0;" v-if="accountInfo.remark">
					<text class="form-item-title psa">
						拒绝原因&ensp;&ensp;<text style="margin-left: 30rpx; color: #FF4D4D;">{{accountInfo.remark}}</text>
					</text>
				</view>
			</form>
		</scroll-view>
		<view class="form-submit" @click="formSubmit()" v-if="accountInfo.status === ''">
			提交审核
		</view>
		<view class="form-submit" @click="formSubmit()" v-if="accountInfo.status === 3">
			重新编辑
		</view>
		<image v-if="accountInfo.status" :src="`/static/img/user/status${accountInfo.status}.png`" class="form-item-status psa"/>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import http_config from '@/config/http'; 
	export default {
		
		data() {
			const now = new Date();
			return {
				showBsd: false,
				accountInfo:{
					address: "",
					after_image: "",
					after_image_url: "",
					before_image: "",
					before_image_url: "",
					birthday: "",
					card: "",
					driving_image: "",
					driving_image_url: "",
					hand_image: "",
					hand_image_url: "",
					nation: "汉族",
					realname: "",
					remark: null,
					sex: 1,
					status: '',
					travel_image: "",
					travel_image_url: "",
				},
				submitDisabled:false,
				picList: {
					tempImgList1: [],
					tempImgList2: [],
					tempImgList3: [],
					tempImgList4: [],
					tempImgList5: [],
				},
				multiIndex: [
					now.getFullYear() - 1900, // 年份
					now.getMonth(),           // 月份 (0-11)
					now.getDate() - 1,        // 日期 (1-31，减1以用于索引)
					// now.getHours(),           // 小时 (0-23)
					// now.getMinutes(),         // 分钟 (0-59)
					// now.getSeconds()          // 秒 (0-59)
				],
				multiRange: this.getMultiRange(),
				minOptions: [
					"汉族",
					"蒙古族",
					"回族",
					"藏族",
					"维吾尔族",
					"苗族",
					"彝族",
					"壮族",
					"布依族",
					"朝鲜族",
					"满族",
					"侗族",
					"瑶族",
					"白族",
					"土家族",
					"哈尼族",
					"哈萨克族",
					"傣族",
					"黎族",
					"傈僳族",
					"佤族",
					"畲族",
					"高山族",
					"拉祜族",
					"水族",
					"东乡族",
					"纳西族",
					"景颇族",
					"柯尔克孜族",
					"土族",
					"达斡尔族",
					"仫佬族",
					"羌族",
					"布朗族",
					"撒拉族",
					"毛难族",
					"仡佬族",
					"锡伯族",
					"阿昌族",
					"普米族",
					"塔吉克族",
					"怒族",
					"乌孜别克族",
					"俄罗斯族",
					"鄂温克族",
					"崩龙族",
					"保安族",
					"裕固族",
					"京族",
					"塔塔尔族",
					"独龙族",
					"鄂伦春族",
					"赫哲族",
					"门巴族",
					"珞巴族",
					"基诺族"
				]
			}
		},
		computed: {
			formDisabled() {
				return this.accountInfo.status === 1 || this.accountInfo.status === 2;
			},
			formattedDateTime() {
				const year = this.multiRange[0][this.multiIndex[0]];
				const month = String(this.multiRange[1][this.multiIndex[1]]).padStart(2, '0');
				const day = String(this.multiRange[2][this.multiIndex[2]]).padStart(2, '0');
				// const hour = String(this.multiRange[3][this.multiIndex[3]]).padStart(2, '0');
				// const minute = String(this.multiRange[4][this.multiIndex[4]]).padStart(2, '0');
				// const second = String(this.multiRange[5][this.multiIndex[5]]).padStart(2, '0');
				return `${year}-${month}-${day}`; // ${hour}:${minute}:${second}
			},
			...mapState(['user'])
		},
		async onLoad() {
			this.$xyfun.setNavBar(' ');
			this.loadData();
		},
		methods: {
			changeSex(e) {
				if (!this.formDisabled) this.accountInfo.sex = e
			},
			getMultiRange() {
				let yearRange = [];
				let monthRange = [];
				let dayRange = [];
				// let hourRange = [];
				// let minuteRange = [];
				// let secondRange = [];
				
				// 生成年月日时分秒的数组
				for (let i = 1900; i <= 2100; i++) yearRange.push(i);
				for (let i = 1; i <= 12; i++) monthRange.push(i);
				for (let i = 1; i <= 31; i++) dayRange.push(i);
				// for (let i = 0; i <= 23; i++) hourRange.push(i);
				// for (let i = 0; i <= 59; i++) minuteRange.push(i);
				// for (let i = 0; i <= 59; i++) secondRange.push(i);
				
				return [yearRange, monthRange, dayRange];
				// return [yearRange, monthRange, dayRange, hourRange, minuteRange, secondRange];
			},
			onMultiMinChange(e) {
				if (!this.formDisabled) this.accountInfo.nation = this.minOptions[e.detail.value]
			},
			onMultiChange(e) {
				this.showBsd = true
				this.multiIndex = e.detail.value;
				setTimeout(() => {
					this.accountInfo.birthday = this.formattedDateTime;
				}, 0);
			},
			loadData(){
				this.picList = {
					tempImgList1: [],
					tempImgList2: [],
					tempImgList3: [],
					tempImgList4: [],
					tempImgList5: [],
				}
				this.$api.get({
					url: '/user/user/getUserAuth',
					loadingTip:'加载中...',
					data: {},
					success: res => {
						if (res) {
							this.accountInfo = res
							this.picList.tempImgList1.push(this.accountInfo.before_image_url)
							this.picList.tempImgList2.push(this.accountInfo.after_image_url)
							this.picList.tempImgList3.push(this.accountInfo.hand_image_url)
							this.picList.tempImgList4.push(this.accountInfo.travel_image_url)
							this.picList.tempImgList5.push(this.accountInfo.driving_image_url)
							this.formattedDateTime = res.birthday
							this.showBsd = true
						} else {
							this.showBsd = false
						}
						console.log('formDisabled', this.formDisabled)
					}
				});
			},
			
			//选项图片
			chooseImage(type){
				var that = this;
				// console.log('chooseImage', type)
				uni.chooseImage({
					count: 5, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: res => {
						let tempFilePaths = res.tempFilePaths;
						that.picList['tempImgList'+ type] = [...tempFilePaths]
					}
				});
			},
			//删除图片
			delImage(index, tempImgList){
				if (!this.formDisabled) tempImgList.splice(index,1);
			},
			
			// 保存
			async formSubmit() {
				
				var that = this;
				
				// if(this.submitDisabled){
				// 	return false;
				// }
				// this.submitDisabled = true;
				if(that.picList.tempImgList1.length > 0){
					await that.uploadImage(that.picList.tempImgList1, 'before_image');
				}
				if(that.picList.tempImgList2.length > 0){
					await that.uploadImage(that.picList.tempImgList2, 'after_image');
				}
				if(that.picList.tempImgList3.length > 0){
					await that.uploadImage(that.picList.tempImgList3, 'hand_image');
				}
				if(that.picList.tempImgList4.length > 0){
					await that.uploadImage(that.picList.tempImgList4, 'travel_image');
				}
				if(that.picList.tempImgList5.length > 0){
					await that.uploadImage(that.picList.tempImgList5, 'driving_image');
				}
				setTimeout(() => {
					const accountInfo = JSON.parse(JSON.stringify(this.accountInfo));
					delete accountInfo.after_image_url;
					delete accountInfo.before_image_url;
					delete accountInfo.driving_image_url;
					delete accountInfo.hand_image_url;
					delete accountInfo.travel_image_url;
					delete accountInfo.remark;
					delete accountInfo.status;
					console.log(accountInfo);
					this.$api.post({
						url: '/user/user/userAuth',
						loadingTip:'提交中...',
						data: accountInfo,
						success: (res) => {
							uni.showModal({
								title: '提示',
								content: `提交成功`, 
								showCancel: false,
								success: function (res) {
									if (res.confirm) {
										// that.submitDisabled = false;
										that.$xyfun.to('/pages/user');
									}
								}
							});
						},
						fail(){
							this.submitDisabled = false;
						}
					});
				}, 0);
				
			},
			// 上传图片
			async uploadImage(imgs,type) {
				var that = this;
				uni.showLoading({
					title:'图片上传中...'
				})
				return new Promise((resolve, reject) => {
					var i  = 0;
					imgs.forEach((url)=>{
						uni.uploadFile({
							url: http_config.base_url + "/api/common/upload",
							filePath: url,
							name: "file",
							header: { token: that.user.info.token },
							success: res => {
								const res1 = JSON.parse(res.data);
								console.log('res1.data.url', res1.data.url)
								that.accountInfo[type] = res1.data.url;
							},
							complete: e => {
								i++;
								if(i == imgs.length){
									resolve();
									uni.hideLoading();
								}
							}
						});
					});
					
					
				}).catch(e => {
					console.log(e);
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.form-item-status {
		width: 245rpx;
		height: 192rpx;
		right: 40rpx;
		top: 40vh;
	}
	.select_sex {
		border: 1rpx solid #005650;
		width: 148rpx;
		height: 50rpx;
		right: 30rpx;
		top: 24rpx;
		border-radius: 15rpx;
		overflow: hidden;
		float: left;
		.select_sex_o {
			float: left;
			width: 73rpx;
			text-align: center;
			height: 50rpx;
			line-height: 50rpx;
			color: rgba(102, 102, 102, 0.87);
		}
		.active_sex {
			color: white;
			background-color: #005650;
		}
	}
	.picker {
		padding: 0px;
		background-color: white;
		// color: rgba(102, 102, 102, 0.87);
	}
	.form-submit {
		margin: 35rpx 0 50rpx;
		width: 649rpx;
    	height: 100rpx;
		border-radius: 15rpx;
		background-color: rgba(0,86,80,1);
		text-align: center;
		color: white;
		line-height: 95rpx;
		float: left;
	}
	.form-item {
		width: 100%;
		position: relative;
		margin-top: 35rpx;
		float: left;
		.form-item-title {
			left: 26rpx;
			top: 30rpx;
			color: rgba(102, 102, 102, 0.87);
		}
		.form-item-pic {
			border: 1rpx solid rgba(111, 111, 111, 0.31);
			height: 450rpx; 
			border-radius: 15rpx; 
			overflow: hidden;
			.form-item-pic1 {
				border: 1rpx dashed rgba(187,187,187,0.31); 
				height: 330rpx; 
				border-radius: 15rpx; 
				width: 590rpx;
				margin: 25rpx;
				line-height: 329rpx;
				margin-top: 90rpx;
			}
			.form-item-open {
				height: 330rpx; 
				margin: 25rpx;
				width: 590rpx;
				margin-top: 90rpx;
			}
			.form-item-del {
				top: 30rpx;
				right: 50rpx;
			}
			.form-item-img {
				width: 50rpx;
				height: 50rpx;
			}
			.form-item-sf {
				width: 500rpx;
				height: 290rpx; 
			}
		}
		.form-input {
			width: 622rpx;
			height: 100rpx;
			border-radius: 15rpx;
			background-color: rgba(255,255,255,1);
			border: 1rpx solid rgba(111, 111, 111, 0.31);
			padding-left: 26rpx;
		}
		.placeholder-color {
			color: rgba(135,135,135,0.48);
		}
		.form-count {
			position: absolute;
			top: 30rpx;
			right: 50rpx;
			color: rgba(102,102,102,0.32);
			font-size: 24rpx;
			.full-count {
				font-size: 34rpx;
			}
		}
	}
	.form-select {
		width: 627rpx;
		margin-top: 35rpx;
		padding: 20rpx 10rpx;
		border-radius: 15rpx;
		background-color: white;
		border: 1rpx solid rgba(111, 111, 111, 0.31);
		float: left;
		.form-text {
			width: 580rpx;
			float: left; 
			padding: 10rpx 20rpx 18rpx;
		}
		.form-select-item {
			width: 165rpx;
			height: 90rpx;
			border-radius: 15rpx;
			border: 1rpx solid rgba(111, 111, 111, 0.31);
			float: left;
			margin: 15rpx 21rpx;
			text-align: center;
			line-height: 85rpx;
			color: rgba(135,135,135,0.48);
			background-color: rgba(187,187,187,0.09);
		}
		.active {
			border: 1rpx solid rgba(0,86,80,0.72);
			color: rgba(0,86,80,0.72);
			background-color: white;
		}
	}
</style>